import {
  Button,
  Modal,
  TextField,
  Icon,
  Checkbox,
  Select,
} from "@shopify/polaris";
import { DeleteMinor, AddMajor } from "@shopify/polaris-icons";
import { useState, useCallback } from "react";
import styled from "./AddProduct.module.less";

interface Props {
  active: boolean;
  setActive: (value: boolean) => void;
}

function ModalExample({ active, setActive }: Props) {
  //
  const handleChange = useCallback(() => setActive(!active), [active]);

  //ProductName
  const [ProductNameValue, setProductNameValue] = useState("");

  const handleChangeProductName = useCallback(
    (newValue: string) => setProductNameValue(newValue),
    []
  );
  //Price
  const [PriceValue, setPriceValue] = useState("");

  const handlePriceName = useCallback(
    (newValue: string) => setPriceValue(newValue),
    []
  );
  //Number
  const [NumberValue, setNumberValue] = useState("1");

  const handleNumberName = useCallback(
    (newValue: string) => setNumberValue(newValue),
    []
  );

  //ProductTax
  const [checkedProductTax, setCheckedProductTax] = useState(true);
  const handleChangeProductTax = useCallback(
    (newChecked: boolean) => setCheckedProductTax(newChecked),
    []
  );
  //ProductDeliverGoods
  const [checkedProductDeliverGoods, setCheckedProductDeliverGoods] =
    useState(true);
  const handleChangeProductDeliverGoods = useCallback(
    (newChecked: boolean) => setCheckedProductDeliverGoods(newChecked),
    []
  );

  //ProductWeight
  const [valueProductWeight, setValueProductWeight] = useState("1");

  const handleChangeProductWeight = useCallback(
    (newValue: string) => setValueProductWeight(newValue),
    []
  );

  const [selected, setSelected] = useState("kg");

  const handleSelectChange = useCallback(
    (value: string) => setSelected(value),
    []
  );

  const options = [
    { label: "克", value: "g" },
    { label: "千克", value: "kg" },
    { label: "磅", value: "b" },
    { label: "盎司", value: "gs" },
  ];

  return (
    <Modal open={active} noScroll titleHidden onClose={handleChange} title="">
      <div
        style={{
          color: "#303030",
          fontSize: "14px",
          padding: "16px",
          fontWeight: "600",
          height: "52px",
          backgroundColor: "#F3F3F3",
          borderRadius: "20px 20px 0 0",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          zIndex: "999999999999999999",
        }}
      >
        <div>添加自定义商品</div>
      </div>
      {/* <div style={{ padding: "16px" }}>
        
      </div> */}
      <Modal.Section>
        <div className={styled.FLEX}>
          <div className={styled.SPMC}>
            <TextField
              label="商品名称"
              value={ProductNameValue}
              onChange={handleChangeProductName}
              autoComplete="off"
            />
          </div>
          <div className={styled.JGSL}>
            <TextField
              label="价格"
              placeholder="0.00"
              prefix={<div>￥</div>}
              value={PriceValue}
              onChange={handlePriceName}
              autoComplete="off"
            />
          </div>
          <div className={styled.JGSL}>
            <TextField
              label="数量"
              type="number"
              value={NumberValue}
              onChange={handleNumberName}
              autoComplete="off"
            />
          </div>
        </div>
        <div className={styled.Checkbox}>
          <div>
            <Checkbox
              label="商品应缴税"
              checked={checkedProductTax}
              onChange={handleChangeProductTax}
            />
          </div>
          <div>
            <Checkbox
              label="商品需要进行发货"
              checked={checkedProductDeliverGoods}
              onChange={handleChangeProductDeliverGoods}
            />
          </div>
        </div>
        {checkedProductDeliverGoods && (
          <div className={styled.FONTS}>
            <div>商品重量</div>
            <div className={styled.ProductWeight}>
              <div>
                <TextField
                  label=""
                  type="number"
                  value={valueProductWeight}
                  onChange={handleChangeProductWeight}
                  autoComplete="off"
                />
              </div>
              <div className={styled.BTN}>
                <Select
                  label=""
                  options={options}
                  onChange={handleSelectChange}
                  value={selected}
                />
              </div>
            </div>
            <div className={styled.Color}>用于准确地计算运费</div>
          </div>
        )}
      </Modal.Section>
      <div
        style={{
          display: "flex",
          justifyContent: "end",
          alignItems: "center",
          padding: "16px",
        }}
      >
        <div>
          <Button
            size="slim"
            onClick={() => {
              setActive(false);
            }}
          >
            取消
          </Button>
        </div>
        <div style={{ marginLeft: "10px" }}>
          <Button size="slim" primary>
            添加商品
          </Button>
        </div>
      </div>
    </Modal>
  );
}

export default ModalExample;
